CSS コードサンプル　tableの中で画像とテキストのそろえを変える

css

CSS コードサンプル　tableの中で画像とテキストのそろえを変える

ちょっとしたコードサンプルです。
なるべくtableという表形式コーディングはやめよう！といわれて久しいですが、制作の現場では、ときどき必要な場合がありますよね。

たとえば、次のようなレイアウトを実現する場合です。

まさにテーブル（表）ですね。
さて、このように、画像とテキストが入り混じり、画像は真ん中寄せ（センタリング）したいけれども、テキストは左寄せにしたい、というのはよくあることだと思います。
まずは、テーブルのコーディングだけしてみます。

 <table class="photo_table" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <th>写真</th><th>説明</th><th>写真</th><th>説明</th>
    </tr>
    <tr>
     <td><img src="images/goya.jpg"></td>
     <td>ゴーヤ<br>
       丸々としたゴーヤです。
     </td>
     <td><img src="images/figure.jpg"></td>
     <td>フィギュアです。<br>
       素敵なフィギュアですよ。
     </td>
    </tr>
 <中略>
  </tbody>
 </table>

cssで、画像は真ん中よりに、テキストは左寄せにしてみましょう。
たとえば、いくつか方法がありますが、

• 画像のtdにclassやidをつけて、text-align:center;を指定する
• 画像を
  でくくる

などは、タグの量を増やさなければいけません。

この例ではたったの2行ですが、これが20行ぐらいある場合を考えると、ちょっと手間ですよね。

スタイルだけで設定するには次のようにします。

 .photo_table{
   text-align:left;
 }

 .photo_table img {
    display: block;
    margin: auto;
 }

imgタグはインライン要素なので、display:blockでブロック要素にしないと、margin:autoがききません。

thやbackground-colorなどのほかのスタイルは、適宜設定してください。

で、この例ではtableの例になっていますが、別にdivでもなんでもOKです。